<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>带有指定的角度的线性渐变</title>
    <style>
        /* 如果你想要在渐变的方向上做更多的控制，你可以定义一个角度，而不用预定义方向（to bottom、to top、to right、to left、to bottom right，等等）。 */
        /* 语法 */
        /* background-image: linear-gradient(angle, color-stop1, color-stop2); */
        /* 角度是指水平线和渐变线之间的角度，逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。 */

        /* 带有指定的角度的线性渐变： */
        #grad1 {
            height: 100px;
            /* 浏览器不支持的时候显示 */
            background-color: red;
            /* 0deg 将创建一个从下到上的渐变 */
            background-image: linear-gradient(0deg, red, yellow);
        }

        #grad2 {
            height: 100px;
            /* 浏览器不支持的时候显示 */
            background-color: red;
            /* 90deg 将创建一个从左到右的渐变 */
            background-image: linear-gradient(90deg, red, yellow);
        }

        #grad3 {
            height: 100px;
            /* 浏览器不支持的时候显示 */
            background-color: red;
            /* 180deg 将创建一个从上到下的渐变 */
            background-image: linear-gradient(180deg, red, yellow);
        }

        #grad4 {
            height: 100px;
            /* 浏览器不支持的时候显示 */
            background-color: red;
            /* -90deg 将创建一个从右到左的渐变 */
            background-image: linear-gradient(-90deg, red, yellow);
        }
    </style>
</head>

<body>

    <h3>线性渐变 - 使用不同的角度</h3>

    <div id="grad1" style="text-align:center;">0deg</div><br>
    <div id="grad2" style="text-align:center;">90deg</div><br>
    <div id="grad3" style="text-align:center;">180deg</div><br>
    <div id="grad4" style="text-align:center;">-90deg</div>

    <p><strong>注意：</strong> Internet Explorer 9 及之前的版本不支持渐变。</p>

</body>

</html>